<template>
	<div class="app">
		<el-form ref="editableForm" :model="editRow" :rules="rules" label-width="0" :show-message="true" class="editable-table">
			<el-table :data="tableData">
				<el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop" align="center">
					<template #default="{ row, $index }">
						<div v-if="$index === editIndex" class="validate-info">
							<el-form-item :prop="column.prop">
								<el-input v-model="editRow[column.prop]" />
							</el-form-item>
						</div>
						<span v-else>
							<span>{{ row[column.prop] }}</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column v-if="!disabled" label="操作" width="200" align="center">
					<template #default="{ row, $index }">
						<el-form-item>
							<template v-if="$index === editIndex">
								<el-button type="success" size="mini" plain @click="save">保存</el-button>
								<el-button type="info" size="mini" plain @click="cancel">取消</el-button>
							</template>
							<template v-else>
								<el-button type="primary" size="mini" plain @click="edit(row, $index)"> 修改 </el-button>
								<el-popconfirm title="是否确认删除" @confirm="deleteRow($index)" style="margin-left: 10px">
									<template #reference>
										<el-button slot="reference" type="danger" size="mini" plain>删除</el-button>
									</template>
								</el-popconfirm>
							</template>
						</el-form-item>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<el-form v-if="!disabled" ref="addForm" :model="addRow" :rules="rules" label-width="0" :show-message="true" class="add-table">
			<el-table :data="[addRow]" :show-header="false">
				<el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop" align="center">
					<template #default="{ row }" class="validate-info">
						<div class="validate-info">
							<el-form-item v-if="column.type == 'isInput'" :prop="column.prop">
								<el-input v-model="addRow[column.prop]" />
							</el-form-item>
							<el-form-item v-if="column.type == 'isDate'" :prop="column.prop">
								<el-date-picker clearable v-model="addRow[column.prop]" type="date" value-format="YYYY-MM-DD" placeholder="选择记录日期">
								</el-date-picker>
							</el-form-item>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200px" align="center">
					<template #default="{ row }">
						<el-form-item>
							<el-button type="success" size="mini" plain @click="add(row)">新增</el-button>
						</el-form-item>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
	</div>
</template>
<script>
export default {
	props: {
		//配置列
		columns: {
			type: Array,
			default: () => [],
		},
		// 规则
		rules: {
			type: Object,
			default: () => {},
		},
		tableSourceData: {
			type: Array,
			default: () => [],
		},
		// 可编辑状态
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			// 表格数据
			tableData: [],
			// 当前编辑行下标
			editIndex: -1,
			// 当前编辑行
			editRow: {
				// username: '',
				// address: '',
			},
			// 新增行
			addRow: {
				// username: '',
				// address: '',
			},
		};
	},
	watch: {
		tableSourceData(val) {
			this.tableData = val;
			console.log('this.tableData', this.tableData);
		},
	},
	methods: {
		save() {
			this.$refs.editableForm.validate((valid) => {
				if (valid) {
					this.tableData.splice(this.editIndex, 1, { ...this.editRow });
					this.editIndex = -1;
					this.$message.success('修改成功');
					this.$emit('getList', this.tableData);
				}
				return valid;
			});
		},
		cancel() {
			this.editIndex = -1;
		},
		edit(row, index) {
			if (this.editIndex > -1) {
				this.$message.warning('请先完成修改中的行');
				return;
			}
			this.editRow = { ...row };
			this.editIndex = index;
		},
		add(row) {
			if (this.editIndex > -1) {
				this.$message.warning('请先完成修改中的行');
				return;
			}
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					this.addRow = {};
					this.tableData.push({ ...row });
					this.$message.success('新增成功');
					this.$emit('getList', this.tableData);
				}
				return valid;
			});
		},
		deleteRow(index) {
			this.tableData.splice(index, 1);
			this.$message.success('删除成功!');
			this.$emit('getList', this.tableData);
		},
	},
};
</script>
<style scoped>
.app {
	padding: 20px;
}

.app /deep/ .el-form-item {
	margin-bottom: 0;
}

.validate-info /deep/ .el-form-item {
	margin: 18px 0;
}
.editable-table /deep/ .el-table__empty-block {
	display: none;
}
.editable-table,
.add-table {
	width: 100%;
	margin: 0 auto;
}
</style>
